<template>
	<view class="content">
		<view class="bgColor">
		</view>
		<view class="list">
			<view class="list-left">
				头像
			</view>
			<view class="list-right" @click="upLoadImage">
				<view class="list-photo">
					<image :src="head" mode=""></image>
				</view>
				<view class="right-icon">
					<u-icon name="arrow-right" color="#000000" size="30"></u-icon>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-left">
				昵称
			</view>
			<view class="list-right">
				<view class="list-photo">
					<!-- <input type="text" v-model="nickName"> -->
					<u-input
					   placeholder="请输入昵称"
					   border="surround"
					   v-model="nickName"
					 ></u-input>
				</view>
				<view class="right-icon">

				</view>
			</view>
		</view>
<!-- 		<view class="list">
			<view class="list-left">
				性别
			</view>
			<view class="list-right" @click="show=true">
				<view class="list-photo">
					<input type="text" v-model="gender" :disabled="true">
				</view>
				<view class="right-icon">
					<u-icon name="arrow-right" color="#000000" size="30"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- <view class="list">
			<view class="list-left">
				手机号码
			</view>
			<view class="list-right">
				<view class="list-photo">
					 <u-input
					    placeholder="请输入手机号码"
					    border="surround"
					    v-model="phone"
					  ></u-input>
				</view>
				<view class="right-icon">

				</view>
			</view>
		</view> -->
<!-- 		<view class="list">
			<view class="list-left">
				生日
			</view>
			<view class="list-right" @click="timeShow=true">
				<view class="list-photo">
					<input type="text" v-model="birthday" :disabled="true">
				</view>
				<view class="right-icon">
					<u-icon name="arrow-right" color="#000000" size="30"></u-icon>
				</view>
			</view>
		</view> -->
		<view class="btn" @click="submit">
			保存
		</view>
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm"></u-picker>
		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" range-key="cateName"
			@confirm="SexConfirm"></u-picker>
	</view>
</template>

<script>
	import config from '@/config.js'
	export default {
		data() {
			return {
				head: '', //头像
				timeShow: false,
				nickName: '',
				gender: '',
				phone: '',
				birthday: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				selectorObj: [{
						cateName: '男',
						id: 1
					},
					{
						cateName: '女',
						id: 2
					}
				],
				show: false,
			}
		},
		onShow() {
			this.getuser()
		},
		methods: {
			// 选择性别
			SexConfirm(e) {
				this.gender = this.selectorObj[e[0]].cateName
			},
			// 选择生日
			timeConfirm(e) {
				this.birthday = e.year + '-' + e.month + '-' + e.day
			},
			// 上传图片
			upLoadImage() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '正在上传中...'
						});
						uni.uploadFile({
							url: config.base_url + 'api/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'type': '1'
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								var json = JSON.parse(uploadFileRes.data)
								that.head = json.url

							}
						});

					}
				});
			},
			getuser() {
				this.$ajax.get({
					url: 'api/getUserInfo'
				}).then(res => {
					this.head = res.user.head
					this.nickName = res.user.nickName
					this.gender = res.user.gender
					this.phone = res.user.phone
					this.birthday = res.user.birthday
					uni.setStorageSync('userInfo', res.user)
				})
			},
			submit() {
				this.$ajax.post({
					url: 'api/updateUser',
					data: {
						head: this.head,
						nickName: this.nickName,
						gender: this.gender,
						phone: this.phone,
						birthday: this.birthday
					}
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 2000
						})
						this.getuser()
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/mine/mine'
							})
						}, 2000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: -1;
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.list-left {
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
		}

		.list-right {
			display: flex;
			align-items: center;

			.list-photo {
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				input {
					text-align: right;
					font-size: 28rpx;
					color: #BEBEBE;
				}
			}

			.right-icon {
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}

	.btn {
		width: 690rpx;
		padding: 20rpx;
		background: #2891f1;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: bold;
		box-sizing: border-box;
		text-align: center;
		border-radius: 50rpx;
		margin: 50rpx auto;
	}
</style>
